<template>
    <div class="workbench-dashboard">
        <!-- 统计卡片 -->
        <div class="stats-grid">
            <el-card class="stat-card">
                <div class="stat-content">
                    <div class="stat-icon">📊</div>
                    <div class="stat-info">
                        <div class="stat-title">总访问次数</div>
                        <div class="stat-value">9120</div>
                        <div class="stat-change positive">较上周 +20%</div>
                    </div>
                </div>
            </el-card>
            <el-card class="stat-card">
                <div class="stat-content">
                    <div class="stat-icon">👥</div>
                    <div class="stat-info">
                        <div class="stat-title">在线访客数</div>
                        <div class="stat-value">182</div>
                        <div class="stat-change positive">较上周 +10%</div>
                    </div>
                </div>
            </el-card>
            <el-card class="stat-card">
                <div class="stat-content">
                    <div class="stat-icon">🖱️</div>
                    <div class="stat-info">
                        <div class="stat-title">点击量</div>
                        <div class="stat-value">9520</div>
                        <div class="stat-change negative">较上周 -12%</div>
                    </div>
                </div>
            </el-card>
            <el-card class="stat-card">
                <div class="stat-content">
                    <div class="stat-icon">👤</div>
                    <div class="stat-info">
                        <div class="stat-title">新用户</div>
                        <div class="stat-value">156</div>
                        <div class="stat-change positive">较上周 +30%</div>
                    </div>
                </div>
            </el-card>
        </div>

        <!-- 图表区域 -->
        <div class="charts-section">
            <el-card class="chart-card">
                <div class="chart-title">用户概述</div>
                <div class="chart-subtitle">比上周 +23%</div>
                <div class="chart-description">我们为您创建了多个选项，可将它们组合在一起并定制为像素完美的页面</div>
                <div class="chart-container">
                    <div class="bar-chart">
                        <div class="chart-bars">
                            <div class="bar" style="height: 60px;"></div>
                            <div class="bar" style="height: 120px;"></div>
                            <div class="bar" style="height: 80px;"></div>
                            <div class="bar" style="height: 160px;"></div>
                            <div class="bar" style="height: 100px;"></div>
                            <div class="bar" style="height: 140px;"></div>
                            <div class="bar" style="height: 90px;"></div>
                            <div class="bar" style="height: 180px;"></div>
                            <div class="bar" style="height: 110px;"></div>
                        </div>
                        <div class="chart-labels">
                            <span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span>
                        </div>
                    </div>
                </div>
                <div class="chart-metrics">
                    <div class="metric-item">
                        <span class="metric-label">总用户量:</span>
                        <span class="metric-value">32k</span>
                    </div>
                    <div class="metric-item">
                        <span class="metric-label">总访问量:</span>
                        <span class="metric-value">128k</span>
                    </div>
                    <div class="metric-item">
                        <span class="metric-label">日访问量:</span>
                        <span class="metric-value">1.2k</span>
                    </div>
                    <div class="metric-item">
                        <span class="metric-label">周同比:</span>
                        <span class="metric-value positive">+5%</span>
                    </div>
                </div>
            </el-card>
            <el-card class="chart-card">
                <div class="chart-title">访问量</div>
                <div class="chart-subtitle">今年增长 +15%</div>
                <div class="chart-container">
                    <div class="line-chart">
                        <svg class="chart-svg" viewBox="0 0 300 150">
                            <polyline class="chart-line"
                                points="10,140 30,120 50,110 70,90 90,80 110,70 130,60 150,50 170,40 190,30 210,25 230,20 250,15 270,10 290,5">
                            </polyline>
                        </svg>
                        <div class="chart-labels">
                            <span>1月</span><span>2月</span><span>3月</span><span>4月</span><span>5月</span><span>6月</span><span>7月</span><span>8月</span><span>9月</span><span>10月</span><span>11月</span><span>12月</span>
                        </div>
                    </div>
                </div>
            </el-card>
        </div>

        <!-- 底部信息区域 -->
        <div class="info-section">
            <el-card class="info-card">
                <div class="card-header">
                    <div class="card-title">新用户</div>
                    <div class="card-badge positive">这个月增长 +20%</div>
                </div>
                <div class="user-table">
                    <div class="table-header">
                        <span>头像</span>
                        <span>地区</span>
                        <span>性别</span>
                        <span>进度</span>
                    </div>
                    <div class="table-row">
                        <div class="user-avatar">👤</div>
                        <div class="user-region">北京</div>
                        <div class="user-gender">女</div>
                        <div class="user-progress">
                            <div class="progress-bar">
                                <div class="progress-fill" style="width: 60%"></div>
                            </div>
                            <span class="progress-text">60%</span>
                        </div>
                    </div>
                </div>
                <div class="table-tabs">
                    <span class="tab active">本月</span>
                    <span class="tab">上月</span>
                    <span class="tab">今年</span>
                </div>
            </el-card>
            <el-card class="info-card">
                <div class="card-header">
                    <div class="card-title">动态</div>
                    <div class="card-badge positive">新增 +6</div>
                </div>
                <div class="activity-item">
                    <span class="user">中小鱼</span>
                    <span class="action">关注了</span>
                    <span class="target">薛静思</span>
                </div>
            </el-card>
            <el-card class="info-card">
                <div class="card-header">
                    <div class="card-title">待办事项</div>
                    <div class="card-badge negative">待处理 3</div>
                </div>
                <div class="todo-item">
                    <el-checkbox>查看今天工作内容</el-checkbox>
                    <span class="todo-time">上午 09:30</span>
                </div>
                <div class="todo-item">
                    <el-checkbox>回包邮件</el-checkbox>
                </div>
            </el-card>
        </div>
    </div>
</template>

<script setup>
// 组件逻辑可以在这里添加
</script>

<style scoped>
/* 工作台仪表盘样式 */
.workbench-dashboard {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* 确保Element Plus组件没有边框 */
.workbench-dashboard :deep(.el-card) {
    border: none !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

.workbench-dashboard :deep(.el-card__body) {
    border: none !important;
}

.workbench-dashboard :deep(.el-checkbox) {
    border: none !important;
}

.workbench-dashboard :deep(.el-checkbox__input) {
    border: none !important;
}

/* 确保所有元素都没有边框 */
.workbench-dashboard * {
    border: none !important;
    outline: none !important;
}

.workbench-dashboard *:before,
.workbench-dashboard *:after {
    border: none !important;
    outline: none !important;
}

/* 增加卡片间距和层级感 */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-bottom: 24px;
}

.stat-card {
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border: none;
    transition: all 0.3s ease;
}

.stat-card:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

.stat-content {
    display: flex;
    align-items: center;
    gap: 16px;
}

.stat-icon {
    font-size: 32px;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
    color: white;
}

.stat-info {
    flex: 1;
}

.stat-title {
    font-size: 14px;
    color: #666;
    margin-bottom: 8px;
}

.stat-value {
    font-size: 28px;
    font-weight: bold;
    color: #333;
    margin-bottom: 4px;
}

.stat-change {
    font-size: 12px;
    font-weight: 500;
}

.stat-change.positive {
    color: #67c23a;
}

.stat-change.negative {
    color: #f56c6c;
}

.charts-section {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
    margin-bottom: 24px;
}

.chart-card {
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    min-height: 300px;
    border: none;
    transition: all 0.3s ease;
}

.chart-card:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

.chart-title {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    margin-bottom: 8px;
}

.chart-subtitle {
    font-size: 14px;
    color: #67c23a;
    margin-bottom: 16px;
}

.chart-description {
    font-size: 12px;
    color: #999;
    margin-bottom: 16px;
}

.chart-container {
    height: 200px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: #f8f9fa;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 20px;
    border: none;
    padding: 16px;
}

.bar-chart {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    padding: 0 10px;
}

.chart-bars {
    display: flex;
    align-items: flex-end;
    height: 100%;
    width: 100%;
}

.bar {
    width: 10px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 8px;
    margin: 0 2px;
    transition: height 0.5s ease-in-out;
}

.chart-labels {
    display: flex;
    justify-content: space-around;
    margin-top: 10px;
    font-size: 12px;
    color: #666;
}

.line-chart {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: #f8f9fa;
    border-radius: 8px;
    overflow: hidden;
    border: none;
}

.chart-svg {
    width: 100%;
    height: 100%;
}

.chart-line {
    fill: none;
    stroke: #409EFF;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: dash 1s linear forwards;
}

@keyframes dash {
    to {
        stroke-dashoffset: 0;
    }
}

.chart-metrics {
    display: flex;
    justify-content: space-around;
    margin-top: 20px;
    padding: 16px 0;
    border: none;
    border-top: none;
}

.metric-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.metric-label {
    font-size: 12px;
    color: #999;
}

.metric-value {
    font-size: 18px;
    font-weight: bold;
    color: #333;
}

.metric-value.positive {
    color: #67c23a;
}

.info-section {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 24px;
}

.info-card {
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border: none;
    transition: all 0.3s ease;
}

.info-card:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.card-title {
    font-size: 16px;
    font-weight: bold;
    color: #333;
}

.card-badge {
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 12px;
    font-weight: 500;
}

.card-badge.positive {
    background: #f0f9ff;
    color: #67c23a;
}

.card-badge.negative {
    background: #fef2f2;
    color: #f56c6c;
}

.user-table {
    margin-top: 20px;
    border-radius: 8px;
    overflow: hidden;
    border: none;
    background: transparent;
}

.table-header {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    padding: 20px 15px;
    background: transparent;
    font-weight: bold;
    color: #333;
    border: none;
    margin-bottom: 12px;
}

.table-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    padding: 20px 15px;
    align-items: center;
    border: none;
    margin-bottom: 12px;
    background: transparent;
}

.table-row:last-child {
    border: none;
    margin-bottom: 0;
}

.table-row:nth-child(even) {
    background: transparent;
}

.table-row:nth-child(odd) {
    background: transparent;
}

.user-avatar {
    font-size: 24px;
    color: #409EFF;
}

.user-region {
    font-size: 14px;
    color: #666;
}

.user-gender {
    font-size: 14px;
    color: #666;
}

.user-progress {
    display: flex;
    align-items: center;
    gap: 8px;
}

.progress-bar {
    width: 100px;
    height: 8px;
    background: #e0e0e0;
    border-radius: 4px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 4px;
}

.progress-text {
    font-size: 12px;
    color: #999;
}

.table-tabs {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    padding: 16px 0;
    border: none;
    border-top: none;
}

.tab {
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    color: #666;
    margin: 0 10px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.tab.active {
    background-color: #409EFF;
    color: white;
}

.tab:hover {
    background-color: #f0f0f0;
}

.activity-item {
    display: flex;
    gap: 8px;
    align-items: center;
    font-size: 14px;
    padding: 12px 0;
    margin-bottom: 12px;
}

.activity-item:last-child {
    margin-bottom: 0;
}

.activity-item .user {
    color: #409eff;
    font-weight: 500;
}

.activity-item .action {
    color: #666;
}

.activity-item .target {
    color: #409eff;
    font-weight: 500;
}

.todo-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    border: none;
    margin-bottom: 12px;
}

.todo-item:last-child {
    border: none;
    margin-bottom: 0;
}

.todo-time {
    font-size: 12px;
    color: #999;
}

/* 深色模式样式 */
.dark {
    --el-bg-color: #18181c;
    --el-bg-color-page: #141414;
    --el-color-primary: #409EFF;
    --el-text-color-primary: #fff;
    --el-text-color-regular: #e5eaf3;
    --el-border-color: #4c4d4f;
    color: #fff;
}

/* 深色模式下的卡片样式 */
.dark .stat-card,
.dark .chart-card,
.dark .info-card {
    background: #1d1d1f !important;
    border-color: #4c4d4f !important;
    color: #fff !important;
}

.dark .stat-title,
.dark .chart-title,
.dark .card-title {
    color: #e5eaf3 !important;
}

.dark .stat-value {
    color: #fff !important;
}

.dark .metric-label {
    color: #a8abb2 !important;
}

.dark .metric-value {
    color: #fff !important;
}

.dark .activity-item .action {
    color: #a8abb2 !important;
}

.dark .todo-time {
    color: #a8abb2 !important;
}

.dark .chart-container {
    background: #232324 !important;
    border: none !important;
}

.dark .chart-description {
    color: #a8abb2 !important;
}

.dark .chart-labels {
    color: #a8abb2 !important;
}

.dark .chart-metrics {
    border-top-color: transparent !important;
}

.dark .table-header {
    background: transparent !important;
    color: #e5eaf3 !important;
    border-color: transparent !important;
}

.dark .table-row {
    border-bottom-color: transparent !important;
    color: #e5eaf3 !important;
    background: transparent !important;
}

.dark .user-region,
.dark .user-gender {
    color: #a8abb2 !important;
}

.dark .progress-bar {
    background: #4c4d4f !important;
}

.dark .progress-text {
    color: #a8abb2 !important;
}

.dark .table-tabs {
    border-top-color: transparent !important;
}

.dark .tab {
    color: #a8abb2 !important;
}

.dark .tab.active {
    background-color: #409EFF !important;
    color: white !important;
}

.dark .tab:hover {
    background-color: #232324 !important;
}

/* 深色模式下的统计卡片图标 */
.dark .stat-icon {
    background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%) !important;
    color: #fff !important;
}

/* 深色模式下的徽章样式 */
.dark .card-badge.positive {
    background: #1a3a1a !important;
    color: #68d391 !important;
}

.dark .card-badge.negative {
    background: #3a1a1a !important;
    color: #fc8181 !important;
}

/* 深色模式下的变化指标 */
.dark .stat-change.positive {
    color: #68d391 !important;
}

.dark .stat-change.negative {
    color: #fc8181 !important;
}

.dark .chart-subtitle {
    color: #68d391 !important;
}

.dark .metric-value.positive {
    color: #68d391 !important;
}

/* 深色模式下的用户和目标链接 */
.dark .activity-item .user,
.dark .activity-item .target {
    color: #63b3ed !important;
}

/* 深色模式下的复选框 */
.dark .el-checkbox__label {
    color: #e5eaf3 !important;
}

/* 深色模式下的图表样式 */
.dark .bar {
    background: linear-gradient(135deg, #409EFF 0%, #67c23a 100%) !important;
}

.dark .chart-line {
    stroke: #409EFF !important;
}

.dark .progress-fill {
    background: linear-gradient(135deg, #409EFF 0%, #67c23a 100%) !important;
}

.dark .user-avatar {
    color: #409EFF !important;
}

/* 修复访问量图表的深色模式背景 */
.dark .line-chart {
    background: #232324 !important;
    border: none !important;
}

.dark .chart-container {
    background: #232324 !important;
    border: none !important;
}

/* 深色模式下的Element Plus组件样式 */
.dark .workbench-dashboard :deep(.el-card) {
    background: #1d1d1f !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
    transition: all 0.3s ease !important;
}

.dark .workbench-dashboard :deep(.el-card:hover) {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4) !important;
    transform: translateY(-2px) !important;
}

.dark .workbench-dashboard :deep(.el-card__body) {
    border: none !important;
    background: #1d1d1f !important;
}

.dark .workbench-dashboard :deep(.el-checkbox) {
    border: none !important;
}

.dark .workbench-dashboard :deep(.el-checkbox__input) {
    border: none !important;
}

.dark .workbench-dashboard :deep(.el-checkbox__inner) {
    border-color: #4c4d4f !important;
    background-color: #1d1d1f !important;
}

/* 深色模式下确保所有元素都没有边框 */
.dark .workbench-dashboard * {
    border: none !important;
    outline: none !important;
}

.dark .workbench-dashboard *:before,
.dark .workbench-dashboard *:after {
    border: none !important;
    outline: none !important;
}
</style>